<template>
  <div class="business-container">
    <!--行内表单-->
    <div class="form-inline-container">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-input
            v-model="formInline.search"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="你确定要批量开灯吗？"
          >
            <template #reference>
              <el-button type="primary" icon="el-icon-sunny"
                >批量开灯</el-button
              >
            </template>
          </el-popconfirm>
        </el-form-item>
        <el-form-item>
          <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="你确定要批量关灯吗？"
          >
            <template #reference>
              <el-button type="info" icon="el-icon-switch-button"
                >批量关灯</el-button
              >
            </template>
          </el-popconfirm>
        </el-form-item>
        <el-form-item>
          <el-popover
            placement="bottom-end"
            :width="200"
            :visible="formInline.visible"
          >
            <div class="p10">
              <el-slider v-model="formInline.value2"></el-slider>
            </div>
            <div class="d-e-c">
              <el-button
                size="mini"
                type="text"
                @click="formInline.visible = false"
                >取消</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="formInline.visible = false"
                >确定</el-button
              >
            </div>
            <template #reference>
              <el-button type="success" icon="el-icon-thumb"
                >批量调光</el-button
              >
            </template>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <div class="table-container" v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="devices_id" label="设备编号" width="320">
        </el-table-column>
        <el-table-column prop="lighting_name" label="设备名称">
        </el-table-column>
        <el-table-column prop="lighting_satus" label="设备状态">
        </el-table-column>
        <el-table-column prop="brightness" label="亮度"> </el-table-column>
        <el-table-column prop="voltage" label="电压"> </el-table-column>
        <el-table-column prop="power" label="功率因数"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="你确定要开灯吗？"
            >
              <template #reference>
                <el-button type="primary" plain size="mini">开灯</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="你确定要关灯吗？"
            >
              <template #reference>
                <el-button type="info" size="mini" plain>关灯</el-button>
              </template>
            </el-popconfirm>
            <el-popover
              placement="bottom-end"
              :width="200"
              :visible="scope.row.visible"
            >
              <div class="p10">
                <el-slider v-model="scope.row.value2"></el-slider>
              </div>
              <div class="d-e-c">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="visible = false"
                  >确定</el-button
                >
              </div>
              <template #reference>
                <el-button type="success" size="mini" plain>调光</el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          :current-page="currentPage"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      //是否正在加载
      loading: false,
      //表单数据
      formInline: {
        //搜索关键字
        search: "",
      },
      //总条数
      total: 500,
      //每页显示条数
      pageSize: 10,
      //当前页数
      currentPage: 1,
      //表格数据
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /**
     * 获取列表
     */
    getData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      this.tableData = [];
      for (
        let i = this.pageSize * (this.currentPage - 1) + 1;
        i < this.pageSize * this.currentPage + 1;
        i++
      ) {
        let d = new Date();
        let item = {
          id: i,
          created_date:
            d.getFullYear() +
            "-" +
            d.getMonth() +
            "-" +
            d.getDate() +
            " " +
            d.getHours() +
            ":" +
            d.getMinutes() +
            ":" +
            d.getSeconds(),
          update_date: "2021-02-24T06:13:41.308Z",
          category_name: "照明类型B",
          create_date: "2021-02-03T06:50:59.541Z",
          devices_id: "2cf93970-65ec-11eb-baab-37b06a989562",
          gateway_name: "网关wwwww",
          lighting_name: "7C25DA6A036C",
          lighting_satus: "开启",
          brightness: 1,
          voltage: "220W",
          power: 1,
        };
        this.tableData.push(item);
      }
    },

    /**
     * 搜索
     */
    onSubmit() {
      console.log("submit!");
    },

    /**
     * 分页切换
     */
    currentChange(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 上一页
     */
    prevClick(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 下一页
     */
    nextClick(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 多选
     */
    handleSelectionChange(e) {
      console.log(e);
    }

  },
};
</script>
<style lang="scss">
</style>